<script setup>
import { User  } from '@element-plus/icons-vue'
import {useRouter,useRoute} from 'vue-router'
import {ref,reactive,onMounted} from "vue";
import {changeUserInfo} from "@/apis/user";

var router = useRouter()
var route = useRoute()
var type = ref('top')
var infoVisible=ref(false)
var changeVisible=ref(false)
var user = JSON.parse(sessionStorage.getItem('user'))
let infoData = ref({
  id:user.id,
  username:user.username,
  password:user.password,
  addTime:user.addTime,
  sex:user.sex,
  home:user.home,
  identity:user.identity,
})
let changeData = ref({
  id:user.id,
  username:user.username,
  password:user.password,
  addTime:user.addTime,
  sex:user.sex,
  home:user.home,
  identity:user.identity,
})
const exit = (()=>{
  sessionStorage.removeItem('user')
  router.push('/login');
})
const toHome = (()=>{
  router.push('/');
})
const accountInfo=(()=>{
  infoVisible.value=true
})
const saveChange=(()=>{
  changeUserInfo(user.id,changeData.value)
      .then(response=> {
        if (response.state) {
          alert(response.msg);
        } else {
          sessionStorage.setItem('user',JSON.stringify(response.data))
          user=JSON.parse(sessionStorage.getItem('user'))
          infoData=changeData
          changeVisible.value=false
        }
      }).catch(() =>{
        alert('Error !');
  });
})
onMounted(()=>{
  // console.log(infoData.username)
})

</script>

<template>
  <div class="topBar">
    <img  class="logo" src="@/assets/th.jpg" @click="toHome" />
    <el-icon class="icon">
      <User />
    </el-icon>
    <el-dropdown class="dropDown">
      <div>
        {{ user.username }}
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="accountInfo">个人信息</el-dropdown-item>
          <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <div>
    <el-dialog v-model="infoVisible" title="个人信息" width="30%" center>
      <el-form
          :label-position=type
          :datatype="infoData"
          label-width="100px"
          style="max-width: 460px"
      >
        <el-form-item label="Name">
          <el-input v-model="infoData.username" disabled/>
        </el-form-item>
        <el-form-item label="Home">
          <el-input v-model="infoData.home" disabled/>
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="infoData.password" type="password" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="infoVisible = false,changeVisible=true">修改</el-button>
        <el-button @click="infoVisible = false">关闭</el-button>
      </span>
      </template>
    </el-dialog>
  </div>

  <div>
    <el-dialog v-model="changeVisible" title="修改信息" width="30%" center>
      <el-form
          :label-position=type
          label-width="100px"
          :model="changeData"
          style="max-width: 460px"
      >
        <el-form-item label="Name">
          <el-input v-model="changeData.username" disabled/>
        </el-form-item>
        <el-form-item label="Home">
          <el-input v-model="changeData.home" />
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="changeData.password" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoVisible = true,changeVisible=false">取消</el-button>
        <el-button type="primary" @click="saveChange">保存</el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<style scoped>
.topBar{
  position: fixed;
  top:0%;
  width: 100%;
  height: 10%;
  background-color:white;
  z-index:9;
  border-bottom: 1px solid #000;
}
.logo{
  position: absolute;
  left: 0%;
  top:0%;
  width: 5%;
  height: 100%;
}
.logoName{
  font-size: 100%;
  position: absolute;
  left: 5%;
  top:50%;
  width: 10%;
  height: 20%;
}
.dropDown{
  position: absolute;
  padding: 10px 0;
  height: 60%;
  width: 10%;
  top:20%;
  right:0%;
  font-size: larger;
}
.icon{
  position:absolute;
  padding-bottom: 3px;
  right:10%;
  height:100%;
}
</style>
